<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
    <input type="text" id="ipt">
    <button id="btn">我是一按钮</button>
    <button id="btn2">我是一按钮</button>

    <script>
        const btn = document.querySelector('#btn')
        const btn2 = document.querySelector('#btn2')

        const Axios1 = axios.create({
            baseURL:'/',
            timeout:10000,
            headers:{}
        })
        let cancel =null
        //取消请求第一步(拿到一个取消请求的对象)是一个构造函数
        const CancelToken = axios.CancelToken
        btn.onclick =   async function(){
           try{
            const A = await Axios1.get('/yin',{
                //在配置文件中配置该文件
                canceltoken : new CancelToken((c)=>{
                    cancel = c
                })
            })
           }catch(e){
            console.log(e.message);
           }
        }
        btn2.onclick = function(){
            cancel()
        }
    </script>
</body>
</html>